import { Metadata } from "next";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { Progress } from "@/components/ui/progress";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  BarChart4,
  Settings,
  CreditCard,
  Download,
  Users,
  History,
  ArrowUpRight,
  Bell,
  LogOut,
  MessagesSquare,
  Bot,
  Zap,
  Check,
  Plus,
  HelpCircle
} from "lucide-react";

export const metadata: Metadata = {
  title: "控制面板 | bgactor AI Agents",
  description: "管理您的AI代理、查看使用统计并更新您的设置",
};

// 模拟用户数据
const userData = {
  name: "Zhang Wei",
  email: "zhang.wei@example.com",
  avatar: "/images/avatars/zhang-wei.jpg",
  plan: "Professional",
  planStatus: "active",
  planRenewal: "2024-11-15",
  usage: {
    agents: { used: 8, total: 10 },
    conversations: { used: 237, total: 500 },
    apiCalls: { used: 3856, total: 5000 },
    storage: { used: 2.4, total: 5 },
  },
  billingHistory: [
    { date: "2023-10-15", amount: "$49.99", status: "已支付", invoice: "#INV-001" },
    { date: "2023-09-15", amount: "$49.99", status: "已支付", invoice: "#INV-002" },
    { date: "2023-08-15", amount: "$49.99", status: "已支付", invoice: "#INV-003" },
  ],
  agents: [
    { 
      id: "agent-1", 
      name: "客户支持代理", 
      description: "处理客户查询和支持请求的AI代理", 
      status: "active", 
      lastUsed: "今天",
      conversations: 89,
      accuracy: 94
    },
    { 
      id: "agent-2", 
      name: "数据分析代理", 
      description: "分析数据集并生成报告的AI代理", 
      status: "active", 
      lastUsed: "昨天",
      conversations: 45,
      accuracy: 98
    },
    { 
      id: "agent-3", 
      name: "市场研究代理", 
      description: "收集和分析市场趋势的AI代理", 
      status: "inactive", 
      lastUsed: "3天前",
      conversations: 27,
      accuracy: 91
    },
  ],
  recentActivity: [
    { 
      id: "act-1", 
      type: "conversation", 
      description: "与客户支持代理的对话", 
      time: "1小时前",
      details: "讨论了产品功能和使用方法"
    },
    { 
      id: "act-2", 
      type: "agent-creation", 
      description: "创建了新的内容创作代理", 
      time: "昨天",
      details: "配置用于生成市场内容的代理"
    },
    { 
      id: "act-3", 
      type: "data-analysis", 
      description: "数据分析代理完成了报告", 
      time: "2天前",
      details: "分析了上季度销售数据"
    },
  ]
};

// 计算使用百分比
function calculatePercentage(used: number, total: number): number {
  return Math.round((used / total) * 100);
}

export default function DashboardPage() {
  return (
    <div className="flex-1">
      {/* Dashboard Content */}
      <main className="px-4 py-6 md:px-6 md:py-8">
        <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
          <h1 className="text-2xl md:text-3xl font-bold text-white">控制面板</h1>
          <div className="flex items-center space-x-2 mt-4 md:mt-0">
            <Button variant="outline" className="border-slate-700 text-zinc-400 hover:text-white hover:bg-slate-800">
              <HelpCircle className="h-4 w-4 mr-2" />
              帮助
            </Button>
            <Button className="bg-[#50E3C2] text-slate-900 hover:bg-[#3AC4A5]">
              <Plus className="h-4 w-4 mr-2" />
              新建代理
            </Button>
          </div>
        </div>
        
        {/* Usage Stats */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
          <Card className="bg-slate-900/70 border-slate-800">
            <CardHeader className="pb-2">
              <CardTitle className="text-white text-lg">代理数量</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-center justify-between mb-2">
                <div className="text-3xl font-bold text-white">{userData.usage.agents.used}</div>
                <Badge variant="outline" className="border-slate-700 text-zinc-400">
                  上限 {userData.usage.agents.total}
                </Badge>
              </div>
              <Progress value={calculatePercentage(userData.usage.agents.used, userData.usage.agents.total)} className="h-2 bg-slate-800" indicatorClassName="bg-[#50E3C2]" />
            </CardContent>
          </Card>
          
          <Card className="bg-slate-900/70 border-slate-800">
            <CardHeader className="pb-2">
              <CardTitle className="text-white text-lg">对话</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-center justify-between mb-2">
                <div className="text-3xl font-bold text-white">{userData.usage.conversations.used}</div>
                <Badge variant="outline" className="border-slate-700 text-zinc-400">
                  上限 {userData.usage.conversations.total}
                </Badge>
              </div>
              <Progress value={calculatePercentage(userData.usage.conversations.used, userData.usage.conversations.total)} className="h-2 bg-slate-800" indicatorClassName="bg-[#50E3C2]" />
            </CardContent>
          </Card>
          
          <Card className="bg-slate-900/70 border-slate-800">
            <CardHeader className="pb-2">
              <CardTitle className="text-white text-lg">API调用</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-center justify-between mb-2">
                <div className="text-3xl font-bold text-white">{userData.usage.apiCalls.used}</div>
                <Badge variant="outline" className="border-slate-700 text-zinc-400">
                  上限 {userData.usage.apiCalls.total}
                </Badge>
              </div>
              <Progress value={calculatePercentage(userData.usage.apiCalls.used, userData.usage.apiCalls.total)} className="h-2 bg-slate-800" indicatorClassName="bg-green-500" />
            </CardContent>
          </Card>
          
          <Card className="bg-slate-900/70 border-slate-800">
            <CardHeader className="pb-2">
              <CardTitle className="text-white text-lg">存储空间</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-center justify-between mb-2">
                <div className="text-3xl font-bold text-white">{userData.usage.storage.used} GB</div>
                <Badge variant="outline" className="border-slate-700 text-zinc-400">
                  上限 {userData.usage.storage.total} GB
                </Badge>
              </div>
              <Progress value={calculatePercentage(userData.usage.storage.used, userData.usage.storage.total)} className="h-2 bg-slate-800" indicatorClassName="bg-blue-500" />
            </CardContent>
          </Card>
        </div>
        
        {/* Dashboard Tabs */}
        <Tabs defaultValue="agents" className="space-y-6">
          <TabsList className="bg-slate-900 border-slate-800 border p-1">
            <TabsTrigger value="agents" className="data-[state=active]:bg-slate-800 data-[state=active]:text-white data-[state=inactive]:text-zinc-400">
              我的代理
            </TabsTrigger>
            <TabsTrigger value="activity" className="data-[state=active]:bg-slate-800 data-[state=active]:text-white data-[state=inactive]:text-zinc-400">
              最近活动
            </TabsTrigger>
            <TabsTrigger value="billing" className="data-[state=active]:bg-slate-800 data-[state=active]:text-white data-[state=inactive]:text-zinc-400">
              账单摘要
            </TabsTrigger>
          </TabsList>
          
          {/* Agents Tab */}
          <TabsContent value="agents" className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {userData.agents.map((agent) => (
                <Card key={agent.id} className={`bg-slate-900/70 border-slate-800 ${agent.status === 'inactive' ? 'opacity-70' : ''}`}>
                  <CardHeader>
                    <div className="flex justify-between items-center mb-2">
                      <Badge className={agent.status === 'active' ? 'bg-green-600' : 'bg-slate-700'}>
                        {agent.status === 'active' ? '活跃' : '不活跃'}
                      </Badge>
                      <span className="text-sm text-zinc-400">上次使用: {agent.lastUsed}</span>
                    </div>
                    <CardTitle className="text-white">{agent.name}</CardTitle>
                    <CardDescription className="text-zinc-400">
                      {agent.description}
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="pb-2">
                    <div className="grid grid-cols-2 gap-4 mb-3">
                      <div className="bg-slate-800/50 p-2 rounded-md">
                        <div className="text-[#50E3C2] text-lg font-bold">{agent.conversations}</div>
                        <div className="text-xs text-zinc-400">对话总数</div>
                      </div>
                      <div className="bg-slate-800/50 p-2 rounded-md">
                        <div className="text-[#50E3C2] text-lg font-bold">{agent.accuracy}%</div>
                        <div className="text-xs text-zinc-400">准确度</div>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter className="pt-0">
                    <Button variant="outline" size="sm" className="w-full border-slate-700 text-zinc-400 hover:text-white hover:bg-slate-800">
                      管理代理
                    </Button>
                  </CardFooter>
                </Card>
              ))}
              
              {/* Add New Agent Card */}
              <Card className="bg-slate-900/40 border-slate-800 border-dashed flex flex-col items-center justify-center p-6">
                <div className="w-12 h-12 rounded-full bg-slate-800 flex items-center justify-center mb-4">
                  <Plus className="h-6 w-6 text-[#50E3C2]" />
                </div>
                <h3 className="text-white font-medium mb-2">创建新代理</h3>
                <p className="text-zinc-400 text-sm text-center mb-4">自定义代理以满足您的业务需求</p>
                <Button className="bg-[#50E3C2] text-slate-900 hover:bg-[#3AC4A5]">
                  开始创建
                </Button>
              </Card>
            </div>
          </TabsContent>
          
          {/* Activity Tab */}
          <TabsContent value="activity" className="space-y-4">
            <Card className="bg-slate-900/70 border-slate-800">
              <CardHeader>
                <CardTitle className="text-white">最近活动</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-5">
                  {userData.recentActivity.map((activity, index) => (
                    <div key={activity.id} className="relative pl-6">
                      {index !== userData.recentActivity.length - 1 && (
                        <div className="absolute top-6 bottom-0 left-3 w-px bg-slate-800" />
                      )}
                      <div className="flex flex-col">
                        <div className="absolute top-1 left-0 w-6 h-6 rounded-full bg-slate-800 flex items-center justify-center">
                          {activity.type === 'conversation' ? (
                            <MessagesSquare className="h-3 w-3 text-[#50E3C2]" />
                          ) : activity.type === 'agent-creation' ? (
                            <Plus className="h-3 w-3 text-[#50E3C2]" />
                          ) : (
                            <BarChart4 className="h-3 w-3 text-[#50E3C2]" />
                          )}
                        </div>
                        <div className="flex items-center justify-between mb-1">
                          <h4 className="text-white font-medium">{activity.description}</h4>
                          <span className="text-xs text-zinc-400">{activity.time}</span>
                        </div>
                        <p className="text-sm text-zinc-400">{activity.details}</p>
                      </div>
                    </div>
                  ))}
                </div>
                
                <div className="mt-6 text-center">
                  <Button variant="outline" className="border-slate-700 text-zinc-400 hover:text-white hover:bg-slate-800">
                    查看所有活动
                  </Button>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
          
          {/* Billing Tab */}
          <TabsContent value="billing" className="space-y-4">
            <Card className="bg-slate-900/70 border-slate-800">
              <CardHeader>
                <CardTitle className="text-white">当前套餐</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex items-center justify-between mb-6">
                  <div>
                    <h3 className="text-xl font-bold text-white mb-1">{userData.plan} 套餐</h3>
                    <p className="text-zinc-400">下次续费日期: {userData.planRenewal}</p>
                  </div>
                  <Badge className="bg-green-600">活跃</Badge>
                </div>
                
                <div className="bg-slate-800/50 rounded-lg p-4 mb-6">
                  <div className="flex items-center mb-4">
                    <Check className="h-5 w-5 text-[#50E3C2] mr-2" />
                    <p className="text-white">所有专业功能已解锁</p>
                  </div>
                  <ul className="pl-7 space-y-2">
                    <li className="text-zinc-400 list-disc">最多创建 10 个自定义代理</li>
                    <li className="text-zinc-400 list-disc">每月 500 次对话</li>
                    <li className="text-zinc-400 list-disc">优先支持</li>
                    <li className="text-zinc-400 list-disc">API 访问</li>
                    <li className="text-zinc-400 list-disc">5GB 存储空间</li>
                  </ul>
                </div>
                
                <div className="flex space-x-3">
                  <Button className="flex-1 bg-[#50E3C2] text-slate-900 hover:bg-[#3AC4A5]">
                    升级套餐
                  </Button>
                  <Button variant="outline" className="flex-1 border-slate-700 text-zinc-400 hover:text-white hover:bg-slate-800">
                    管理订阅
                  </Button>
                </div>
              </CardContent>
            </Card>
            
            <Card className="bg-slate-900/70 border-slate-800">
              <CardHeader className="flex flex-row items-center justify-between">
                <CardTitle className="text-white">账单历史</CardTitle>
                <Button variant="ghost" className="text-zinc-400 hover:text-white hover:bg-slate-800">
                  <Download className="h-4 w-4 mr-2" />
                  导出全部
                </Button>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {userData.billingHistory.map((bill) => (
                    <div key={bill.invoice} className="flex items-center justify-between py-3 border-b border-slate-800 last:border-0">
                      <div>
                        <p className="text-white font-medium">{bill.date}</p>
                        <p className="text-sm text-zinc-400">{bill.invoice}</p>
                      </div>
                      <div className="text-right">
                        <p className="text-white font-medium">{bill.amount}</p>
                        <Badge variant="outline" className="border-green-500/30 text-green-400">
                          {bill.status}
                        </Badge>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </main>
    </div>
  );
}
